<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden" :style="themeColor()">
    <view>
      <!-- h-[320rpx] -->
      <view class="h-[180rpx] box-border px-[var(--sidebar-m)] pt-[44rpx] flex flex-col justify-between"
        :style="headerStyle">
        <!-- #ifdef MP-WEIXIN -->
        <!-- <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" /> -->
        <!-- #endif -->
        <view v-if="info" class="flex   items-center relative">
          <!-- 唤起获取微信 -->
          <u-avatar :src="img(info.headimg || info.avatar)" size="55" leftIcon="none"
            :default-url="img('static/resource/images/default_headimg.png')" />
          <view class="ml-[22rpx]">
            <view class="text-[#222222] flex pr-[50rpx] flex-wrap items-center">
              <view class="text-[#222222] truncate max-w-[320rpx] font-bold text-lg mr-[16rpx]">{{ info.nickname }}
              </view>
            </view>
          </view>
        </view>
        <!-- <view :style="gradeStyle"
          class="flex items-center h-[140rpx] box-border rounded-[var(--rounded-big)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]">
          <view class="flex flex-col">
            <view class="flex items-center">
              <image class="w-[30rpx] h-[30rpx] mr-[10rpx]"
                :src="'http://java.niucloud.com/addon/shop_fenxiao/info_vip.png'">
              </image>
              <text class="text-[30rpx] truncate w-[320rpx] font-500 text-[#FDD6A1]">
                默认等级
              </text>
            </view>
            <text class="text-[26rpx] text-[#E8D3B6] mt-[16rpx]">
              下单、邀请好友均可提升等级
            </text>
          </view>
        </view> -->
      </view>
    </view>
    <!-- 佣金 -->
    <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]">
      <view
        class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
        <text class="text-[30rpx] font-500">
          账户信息
        </text>
        <view class="text-[var(--text-color-light6)] text-[26rpx]" @click="toDetailedLink()">
          <text>佣金明细</text>
          <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
        </view>
      </view>
      <view class="flex mt-[50rpx] justify-around commission-content">
        <view class="flex flex-col items-center">
          <text class="text-[24rpx] text-[var(--text-color-light9)]">当前佣金(元)</text>
          <text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{
            fen2yuan(state.summary.brokeragePrice
            ) }}</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="text-[24rpx] text-[var(--text-color-light9)]">昨日佣金(元)</text>
          <text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{
            fen2yuan(state.summary.yesterdayPrice
            ) }}</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="text-[24rpx] text-[var(--text-color-light9)]">累计提现(元)</text>
          <text class="text-[#303133] price-font text-[30rpx] font-500 mt-[16rpx]">{{
            fen2yuan(state.summary.withdrawPrice
            ) }}</text>
        </view>
      </view>
      <view @click="applyCashOut"
        class="text-center mt-[60rpx] mx-auto w-[570rpx] h-[76rpx] flex-center level-wrap text-[#985400] rounded-[90rpx] text-[26rpx] font-500">
        提现
      </view>
    </view>
    <view class="flex">
      <view class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 sidebar-margin h-[150rpx] team-bg">
        <image class="w-[80rpx] h-[80rpx] mr-[20rpx]"
          src="https://files.meton.vip/9ba356d0c21f33a8197a85a81bec21442f4d4f47dc7f99b48c857f5b520dc9db.png">

        </image>
        <view class="flex flex-col" @click="toTeamLink()">
          <text class="text-[28rpx]">
            我的团队
          </text>
          <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">
            {{ state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount }}人
          </text>
        </view>
      </view>

    </view>
    <!-- 常用功能 -->
    <view class="commission-bg pb-[35rpx] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
      <view class="py-[30rpx] px-[24rpx] border-0 border-b-[2rpx] border-solid border-[#f6f6f6] text-[30rpx] font-500">
        常用功能
      </view>
      <view class="flex flex-wrap common-module pt-[7rpx]">

        <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="openShareFn">
          <image class="w-[66rpx] h-[68rpx]"
            src="https://files.meton.vip/82c9f85ad15dab46845bcde75add59be9ad2d41a20840c3295c3b302fa4b6649.png">
          </image>
          <view class="flex flex-col items-center mt-[16rpx]">
            <text class="text-[26rpx]">
              邀请好友
            </text>
            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">
              邀好友赚好礼
            </text>
          </view>
        </view>
        <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="toOrderLink()">
          <image class="w-[66rpx] h-[68rpx]"
            src="https://files.meton.vip/507ab285a2951819d52e02c514e8d77c8fdda1ea03eff0e5503073595f3ab94f.png">
          </image>
          <view class="flex flex-col items-center mt-[16rpx]">
            <text class="text-[26rpx]">
              分销订单
            </text>
            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">
              分销订单明细
            </text>
          </view>
        </view>
        <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="toGoodsLink()">
          <image class="w-[66rpx] h-[68rpx]"
            src="https://files.meton.vip/0f8787602f3e24f6261cdcf0d148c801bd902c6313b4c059126057982bf3425e.png">
          </image>
          <view class="flex flex-col items-center mt-[16rpx]">
            <text class="text-[26rpx]">
              推广商品
            </text>
            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">
              推广商品
            </text>
          </view>
        </view>
        <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="toPromoterRankLink()">
          <image class="w-[66rpx] h-[68rpx]"
            src="https://files.meton.vip/6ea374cbbdc4bb8e7bd029c7e695971f50b1ec7fe448a183781cd7e451b02ab7.png">
          </image>
          <view class="flex flex-col items-center mt-[16rpx]">
            <text class="text-[26rpx]">
              推广排行
            </text>
            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">
              推广排行
            </text>
          </view>
        </view>
        <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="toCommissionRankLink()">
          <image class="w-[66rpx] h-[68rpx]"
            src="https://files.meton.vip/6ea374cbbdc4bb8e7bd029c7e695971f50b1ec7fe448a183781cd7e451b02ab7.png">
          </image>
          <view class="flex flex-col items-center mt-[16rpx]">
            <text class="text-[26rpx]">
              佣金排行
            </text>
            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">
              佣金排行
            </text>
          </view>
        </view>
      </view>
    </view>
    <view>
    </view>
  </view>
  <share-poster ref="sharePosterRef" posterType="commission" :posterId="'0'" :posterParam="posterParam"
    :copyUrl="'/addon/shop/pages/index'" :copyUrlParam="copyUrlParam" />
</template>
<script setup lang="ts">
import useMemberStore from '@/stores/member';
import { goback, img, redirect } from '@/utils/common';
import { fen2yuan } from '@/utils/formatting';
import { computed, nextTick, onMounted, reactive, ref, unref, watch } from 'vue'
import { getBrokerageUser, getBrokerageUserSummary } from './../api/commission'
import { onLoad } from '@dcloudio/uni-app';
import { useShare } from '@/hooks/useShare';
import sharePoster from '@/components/share-poster/share-poster.vue'


const headerStyle = computed(() => {
  return {
    backgroundImage: 'url(' + img('https://files.meton.vip/2ea34b1a77c0fce48e52dd960a9b586835e7a8bcc87f0a6680f5d13cc4ffb9f8.png') + ') ',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom',
    // paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
  }
})
const gradeStyle = computed(() => {
  return {
    backgroundImage: 'url(' + img('https://files.meton.vip/136d094e2f8f5de0f29a3e83b411aa39309aec8e66f3d244248fa08d08abde86.png') + ') ',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom',
    // paddingTop:Object.keys(menuButtonInfo).length?(Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 77)+'rpx':'77rpx',
  }
})
/*** 个人信息 */
const memberStore = useMemberStore()

const info = computed(() => {
  return memberStore.info;
})

const state = reactive({
  showMoney: false,
  summary: {
    brokeragePrice: 0,
    yesterdayPrice: 0,
    withdrawPrice: 0,
    firstBrokerageUserCount: 0, //分销用户数量 一级
    secondBrokerageUserCount: 0, //分销用户数量 二级

  } as any,
});
const getBrokerageUserFn = () => {
  getBrokerageUser().then((res: any) => {
    if (!res.data.brokerageEnabled) {
      let goBackParameter = {
        url: '/addon/shop/pages/index',
        title: '抱歉!您没有分销权限,该功能暂不可用!',
        mode: 'reLaunch'
      };
      goback(goBackParameter)
    } else {
      getBrokerageUserSummaryFn()
    }
  })
}
const getBrokerageUserSummaryFn = async () => {
  let { data } = await getBrokerageUserSummary();
  state.summary = data || {}
}
const toDetailedLink = () => {
  redirect({ url: '/addon/commission/pages/detailed_account' })
}
const toOrderLink = () => {
  redirect({ url: '/addon/commission/pages/order' })
}
const toGoodsLink = () => {
  redirect({ url: '/addon/commission/pages/goods' })
}
const toTeamLink = () => {
  redirect({ url: '/addon/commission/pages/team' })
}
const toCommissionRankLink = () => {
  redirect({ url: '/addon/commission/pages/commission_rank' })
}
const toPromoterRankLink = () => {
  redirect({ url: '/addon/commission/pages/promoter' })
}
const applyCashOut = () => {
  uni.setStorageSync('cashOutAccountType', 'commission')
  redirect({ url: '/addon/commission/pages/apply_cash_out' })
}
/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrlParam = ref('');
let posterParam: any = {};

// 分享海报链接
let wap_member_id = uni.getStorageSync('wap_member_id');

const copyUrlFn = () => {
  if (wap_member_id) copyUrlParam.value += '?mid=' + wap_member_id;

}

const openShareFn = () => {
  if (wap_member_id) posterParam.member_id = wap_member_id;
  sharePosterRef.value.openShare()
}

/************* 分享海报-end **************/
// 分享
const { setShare } = useShare()
onLoad(() => {
  getBrokerageUserFn()

})
onMounted(() => {
  nextTick(() => {
    // 分享 - start
    let share = {
      title: '我的邀请',
      desc: '我的邀请',
      url: ''
    }

    setShare({
      wechat: {
        ...share
      },
      weapp: {
        ...share
      }
    });
    // 分享 - end
    copyUrlFn();

  })

})
</script>
<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

.commission-bg {
  background: #FFFFFF;
}


.commission-content>view {
  position: relative;
  width: 6.5625rem
}

.commission-content>view:after {
  content: "";
  position: absolute;
  width: .0625rem;
  height: 1.875rem;
  background-color: var(--temp-bg);
  top: 50%;
  right: 0;
  transform: translateY(-50%)
}

.commission-content>view:last-of-type:after {
  width: 0;
  height: 0
}

.common-module>view {
  position: relative
}

.common-module>view:after {
  content: "";
  position: absolute;
  width: .0625rem;
  height: 2.5rem;
  background-color: var(--temp-bg);
  top: 50%;
  left: 0;
  transform: translateY(-50%)
}

.common-module>view:nth-child(3n+1):after {
  width: 0;
  height: 0
}

.level-wrap {
  background: linear-gradient(90deg, #FDE4C0, #FDC274);
}

.team-bg {
  background: linear-gradient(135deg, #FFF9F9 10%, #FFFFFF 40%, #FFFFFF 100%);
}
</style>